<!DOCTYPE html>
<html>
<head>
	<!-- set the encoding of your site -->
	<meta charset="utf-8">
	<!-- set the viewport width and initial-scale on mobile devices -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!-- set the title of your site -->
	<title>Mowasalat Documentation</title>
	<!-- include the site stylesheet of bootstrap  -->
	<link rel="stylesheet" href="css/bootstrap.css">
	<!-- include the font awesome stylesheet  -->
	<link rel="stylesheet" href="css/font-awesome.min.css">
	<!-- include the site stylesheet  -->
	<link rel="stylesheet" type="text/css" href="css/all.css">
    <!-- include the site animation stylesheet  -->
    <link rel="stylesheet" href="css/animate.css" type="text/css"/>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic%7CDroid+Sans:400,700' rel='stylesheet' type='text/css'>
	<!-- include jQuery library -->
	<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
	<!-- include bootstrap JavaScript -->
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	<!-- include custom JavaScript -->
	<script type="text/javascript" src="js/jquery.main.js"></script>
</head>
<body class="stretched">
	<div id="wrapper">
		<div class="top-bar">
			<div class="container-fluid">
				<div class="row">
					<div class="col-sm-6">
						<p><strong>Version:</strong> 1.9 | <strong>Dated:</strong> 05th May 2016</p>
					</div>
					<div class="col-sm-6">
						<ul>
							<li><a href="http://themeforest.net/item/Mowasalat-responsive-onemulti-page-html5-template/13852620">Get Support</a></li>
							<li><a href="http://themeforest.net/user/creative-wp">Contact</a></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<div class="top-banner">
			<div class="container-fluid">
				<div class="row">
					<div class="col-xs-12">
						<strong class="main-title"><span class="add">Mowasalat</span> Documentation</strong>
					</div>
				</div>
			</div>
		</div>
		<main id="main">
			<div class="container-fluid">
				<div class="row">
					<div class="col-xs-12">
					<nav id="nav">
						<div class="win-height">
							<ul class="tabset">
								<li class="active">
									<a href="#tab1">Start</a>
									<ul class="smooth-links">
										<li><a class="smoothanchor" href="#docs-installation">Installation</a></li>
										<li><a class="smoothanchor" href="#docs-html">HTML Structure</a></li>
										<li><a class="smoothanchor" href="#docs-logo">Logo Settings</a></li>
										<li><a class="smoothanchor" href="#docs-color">Color Schemes</a></li>
										<li><a class="smoothanchor" href="#docs-fonts">Changing Fonts</a></li>
									</ul>
								</li>
								<li>
									<a href="#tab2">Menu</a>
									<ul class="smooth-links">										
										<li><a class="smoothanchor" href="#docs-h-megamenu">Nav Dropdown Menu</a></li>
									</ul>
								</li>
								<li>
									<a href="#tab3">Page Elements</a>
									<ul class="smooth-links">
										<li><a class="smoothanchor" href="#docs-page-titles">Page Title</a></li>
										<li><a class="smoothanchor" href="#docs-page-grid">Grid</a></li>
									</ul>
								</li>
								<li>
									<a href="#tab4">Sliders</a>
									<ul class="smooth-links">
										<li><a class="smoothanchor" href="#docs-slider">Types &amp; Options</a></li>
									</ul>
								</li>
								<li>
									<a href="#tab5">Blog</a>
									<ul class="smooth-links">
										<li><a class="smoothanchor" href="#docs-b-setup">Setup</a></li>
										<li><a class="smoothanchor" href="#docs-b-posttypes">Post Types</a></li>
									</ul>
								</li>
								<li>
									<a href="#tab6">Portfolio</a>
									<ul class="smooth-links">
										<li><a class="smoothanchor" href="#docs-port-setup">Setup</a></li>
									</ul>
								</li>
								<li>
									<a href="#tab7">Shortcodes</a>
									<ul class="smooth-links">
										<li><a class="smoothanchor" href="#docs-sc-sections">Sections &amp; Parallax</a></li>
										<li><a class="smoothanchor" href="#docs-sc-tabs">Tabs &amp; Accordions</a></li>
										<li><a class="smoothanchor" href="#docs-sc-lightbox">Lightbox &amp; Notifications</a></li>
										<li><a class="smoothanchor" href="#docs-sc-gmap">Google Maps</a></li>
										<li><a class="smoothanchor" href="#docs-sc-countdown">Countdown</a></li>
									</ul>
								</li>
								<li>
									<a href="#tab8">Contact AJAX Form</a>
									<ul class="smooth-links">
										<li><a class="smoothanchor" href="#docs-wid-setup">Contact Form</a></li>										
									</ul>
								</li>
								<li>
									<a href="#tab9">Credits</a>
									<ul class="smooth-links">
										<li><a class="smoothanchor" href="#docs-c-images">Images</a></li>
										<li><a class="smoothanchor" href="#docs-c-jquery">jQuery</a></li>
										<li><a class="smoothanchor" href="#docs-c-css">CSS</a></li>
									</ul>
								</li>
								<li>
									<a href="#tab10">Changelog</a>
									<ul class="smooth-links">										
										<li><a class="smoothanchor" href="#docs-changelog-v0">Version 1.0</a></li>
									</ul>
								</li>
							</ul>
						</div>
					</nav>
					<div class="tab-content">
						<div id="tab1" class="tab-box">
							<div class="introduction">
								<h1 class="heading1">introduction</h1>
								<strong class="title">Before setting up the theme, it is imperative to realize it's capabilities, scope and potential usage.</strong>
								<p>While developing this theme our main focus was to make it user friendly and easy to use for non-technical users requiring their less input or otherwise minimal expertise.</p>
                                <p>This theme is 100% (highly) customizable, each block is portable and can be moved to another page hence producing a new design/layout.</p>
                                <p>Also by simply adding classes in code, user can get variations in styles.</p>
                                <p>We have optimized the code for load speed and extensively used CSS for effects etc.</p>
                                <p>The code is 100% bug free and follows W3C standards. </p>
                                <p>We have used latest tools for development e.g., HTML5/CSS3, BootStrap that will give you powerful and innovative experience for your projects. The theme is fully responsive and retina ready, compatible with all browsers and mobile-devices.</p>
                                <p class="margin-bottom-40">It has passed highest standards of Quality Assurance, giving you freedom and enjoyment of a well-managed, error free code that you can use in any project.</p>
								<h2 class="heading5 margin-bottom-10"><strong><span class="first-letter">M</span>owasalat</strong> is a multipupose Template that has following feature</h2>
								<h5 class="heading5 margin-zero">Home & Inner Pages</h5>
								<ul>
									<li><strong>10 +</strong> Home Pages</li>
									<li><strong>4 </strong> About Us Pages</li>
									<li><strong>6 </strong> Services Pages</li>
									<li><strong>2 </strong> Team Pages</li>
									<li><strong>3 </strong> Shop Pages </li>
									<li><strong>5 </strong> Blog Pages</li>
									<li><strong>1 </strong> Gallery Page</li>
									<li><strong>1 </strong> Partners Page</li>
									<li><strong>1 </strong> Career Page</li>
									<li><strong>1 </strong> Pricing Page</li>
									<li><strong>1 </strong> Branches Page</li>
									<li><strong>1 </strong> Error Page</li>
								</ul>
								<h5 class="heading5 margin-zero">Some Extra Feature</h5>
								<ul>
									<li><strong>10</strong> Header</li>
									<li><strong>10</strong> Footer</li>
								</ul>								
							</div>
							<div id="docs-installation" >
								<h2  class="heading2">Setting up Mowasalat Theme</h2>
								<p>Follow these guide lines below to get started with your Site:</p>
								<ol>
									<li>Open the <code>Mowasalat/markup</code> Folder to find all the Templates Files</li>
									<li>You will need to Upload these files to your Web Server using FTP in order to use it on your Website.</li>
									<li>Make sure you upload the required files/folders listed below:
										<ul>
											<li><code>markup/css</code> - Required css files</li>											
											<li><code>markup/fonts</code> - Required fonts files</li>
											<li><code>markup/images</code> - Required images files</li>
											<li><code>markup/js</code> - Required Javacripts files</li>
											<li><code>markup/revolution</code> - Revolution Slider</li>
											<li><code>markup/process.php</code> - Required PHP file</li>
											<li><code>markup/index.html</code> - Index File/Homepage</li>
										</ul>
										<ul>
											<li>The other files can be used according to your requirement.</li>
										</ul>
									</li>
									<li>After adding all these folder on server you're now good to go..! just add your Content and you will have awesome Template.</li>
								</ol>
							</div>
							<div class="divider"></div>
							<div id="docs-html" >
								<h1>HTML Structure</h1>
								<p>We have Developed <strong>Mowasalat</strong> with a simple coding structure. here is the sample:</p>
								<pre><code class="language-html" data-lang="html"><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="nt">&lt;html</span> <span class="na">lang=</span><span class="s">"en"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;head&gt;</span>

    <span class="f-color">&lt;!-- All Stylesheets here --&gt;</span>
  
  <span class="nt">&lt;/head&gt;</span>
  <span class="nt">&lt;body&gt;</span>   

	<span class="f-color">&lt;!-- nav of the page --&gt;</span>
	&lt;nav class="navbar"&gt;
            ...
	&lt;/nav&gt;
	
	<span class="f-color">&lt;!-- slider --&gt;</span>
	&lt;div class="slider"&gt;
            ...
	&lt;/div&gt;
	
	<span class="f-color">&lt;!-- Contents Containers --&gt;</span>
	&lt;div class="container"&gt;
            ...
	&lt;/div&gt;
	
	<span class="f-color">&lt;!-- footer of the page --&gt;</span>
	&lt;footer&gt;
		
	&lt;/footer&gt;	
	
    <span class="c f-color">&lt;!-- jQuery (necessary for Bootstrap's JavaScript plugins) --&gt;</span>
    
    <span class="c f-color">&lt;!-- Include all compiled plugins (below), or include individual files as needed --&gt;</span>
    
  <span class="nt">&lt;/body&gt;</span>
<span class="nt">&lt;/html&gt;</span></code></pre>

								
								
								<div class="divider"></div>
								<h3>Page PreLoaders</h3>
								<p>You can show Interactive loaders to your Visitors while the Pages of you Website loads in the background &amp; then Reveal your Pages with CSS3 Transitions. </p> 
								
	<pre>&lt;div id="preloader"&gt;
	&lt;div id="status"&gt;
	<span class="c f-color">&lt;!-- Here you can add preloader style --&gt;</span>
	&lt;/div&gt;
	&lt;/div&gt;</pre>
								
							</div>
							<div class="divider"></div>
							<div id="docs-logo" >
								<h1>Logo Settings</h1>
								<p>The Logo can be found in the Nav Section - <code>nav</code></p>
<pre>&lt;a class="navbar-brand" href="index.html"&gt;
	&lt;img src="images/logo/logo.png" class="img-responsive" alt="Mowasalat Logo"&gt;
	&lt;img src=""images/logo/logo-02.png"" class="img-responsive" alt="Mowasalat Logo"&gt;
	&lt;img src=""images/logo/logo-03.png"" class="img-responsive" alt="Mowasalat Logo"&gt;
&lt;/a&gt;</pre>
								<p><span class="label label-danger">Note</span> The Logo Image's width/ height can be <strong>238px/ 44px</strong></p>
								<div class="divider"></div>
								<h2>Retina Logo</h2>
								<p>If you wish to use a Retina Logo, make sure that you use double the size of your Standard Logo. 
							</div>
							<div class="divider"></div>
							<div id="docs-color" >
								<h1>Color Schemes</h1>
								<p>You can change your Website's Color Scheme in an instant.</p>
								<ol class="padding-bottom-20">
								    <li>Changeing path of Color CSS Stylesheets in HTML</li>
								    <li>Changeing just <strong>HEX</strong> value in <code>css/color/color.css</code></li>
								</ol>								
								<p>Make sure you add the <code>css/color/color.css</code> stylesheet in your head after the <code>css/all-stylesheets.css</code> stylesheet.</p>
<pre>&lt;head&gt;
	...
	&lt;link rel="stylesheet" href="css/all-stylesheets.css" type="text/css" /&gt;

	<span class="f-color">&lt;!-- include the site color stylesheet --&gt;</span>
	&lt;link rel="stylesheet" href="css/color/color.css" type="text/css" /&gt;
	...
&lt;/head&gt;</pre>
								
								
							</div>
							<div class="divider"></div>
							<div id="docs-fonts" >
								<h1>Changing Fonts</h1>
								<p>Changing Fonts in Mowasalat is very easy. By default, Mowasalat uses <code>Poppins</code> from the <a href="http://www.google.com/fonts" target="_blank">Google Fonts Library</a>. </p>
								<p>1- Add this code to your website, "css/all-stylesheets.css" file.</p>
<pre><span class="f-color">&lt;!-- Fonts Poppins --&gt;
@import url(https://fonts.googleapis.com/css?family=Poppins:400,300,500,600,700);
</span></pre>
								
								<p>2- Integrate the fonts into your CSS:</p>
<pre>
font-family: 'Poppins', sans-serif;
</pre>
							</div>					
						</div>
						<div id="tab2" class="tab-box">
							
							<div class="divider"></div>
							<div id="docs-h-megamenu" >
								<h1>Nav Dropdown Menu</h1>
								<p>You can start using the Dropdown Menu. Try using the Following code:</p>
<pre>&lt;nav class="navbar navbar-default"&gt;
&lt;div class="container"&gt;
	&lt;div class="navbar-header"&gt;
		&lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"&gt;
		&lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
		&lt;span class="icon-bar"&gt;&lt;/span&gt;
		&lt;span class="icon-bar"&gt;&lt;/span&gt;
		&lt;span class="icon-bar"&gt;&lt;/span&gt;
		&lt;/button&gt;
		&lt;a class="navbar-brand" href="index.html"&gt;&lt;img src="images/logo/logo.png" alt=""&gt;&lt;/a&gt;
	&lt;/div&gt;
	&lt;div id="navbar" class="navbar-collapse collapse"&gt;					
		&lt;ul class="nav navbar-nav navbar-right"&gt;
			&lt;li class="dropdown active"&gt;
				&lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;Home &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
				&lt;ul class="dropdown-menu dropdown-menu-left"&gt;
					&lt;li&gt;&lt;a href="index.html"&gt;Home Page 01&lt;/a&gt;&lt;/li&gt;								
				&lt;/ul&gt;
			&lt;/li&gt;	
		&lt;/ul&gt;
	&lt;/div&gt;
	&lt;!--/.nav-collapse --&gt;
&lt;/div&gt;
&lt;!--/.container-fluid --&gt;
&lt;/nav&gt;</pre>

							</div>
						</div>
						<div id="tab3" class="tab-box">
							<div id="docs-page-titles" >
								<h1>Page Titles</h1>								
								<p><strong>Mowasalat</strong> has following base HTML structure for page title.</p>
<p> Images classes, b-img-01, b-img-02, b-img-03, b-img-04,---, b-img-13 </p>
								
								<pre>&lt;div class="inner-banner <span class="f-color">b-img-01</span>"&gt;
	&lt;div class="black-overlay"&gt;
		&lt;div class="container"&gt;
			&lt;div class="row"&gt;
				&lt;div class="col-lg-12"&gt;
					&lt;div class="info"&gt;
						&lt;h1&gt;About 01&lt;/h1&gt;
						&lt;h2&gt;Go beyond logistics, make the revolution business.&lt;/h2&gt;
					&lt;/div&gt;
				&lt;/div&gt;
			&lt;/div&gt;
		&lt;/div&gt;
		&lt;div class="bread-crumb"&gt;
			&lt;div class="container"&gt;
				&lt;div class="row"&gt;
					&lt;div class="col-lg-12"&gt;
						&lt;ol class="breadcrumb"&gt;
							&lt;li&gt;&lt;a href=""&gt;Home&lt;/a&gt;&lt;/li&gt;
							&lt;li&gt;&lt;a href=""&gt;Company&lt;/a&gt;&lt;/li&gt;
							&lt;li class="active"&gt;About 02&lt;/li&gt;
						&lt;/ol&gt;
					&lt;/div&gt;
				&lt;/div&gt;
			&lt;/div&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/div&gt;</pre>

                       
                               
							</div>
							<div class="divider"></div>
							<div id="docs-page-grid" class="content-inner">
								<h1>Columns &amp; Grid</h1>
								<h3>Bootstrap Grid</h3>
								<div class="show-grid">
									<div class="col-md-1">.col-md-1</div>
									<div class="col-md-1">.col-md-1</div>
									<div class="col-md-1">.col-md-1</div>
									<div class="col-md-1">.col-md-1</div>
									<div class="col-md-1">.col-md-1</div>
									<div class="col-md-1">.col-md-1</div>
									<div class="col-md-1">.col-md-1</div>
									<div class="col-md-1">.col-md-1</div>
									<div class="col-md-1">.col-md-1</div>
									<div class="col-md-1">.col-md-1</div>
									<div class="col-md-1">.col-md-1</div>
									<div class="col-md-1">.col-md-1</div>
								</div>
								<div class="show-grid">
									<div class="col-md-2">.col-md-2</div>
									<div class="col-md-2">.col-md-2</div>
									<div class="col-md-2">.col-md-2</div>
									<div class="col-md-2">.col-md-2</div>
									<div class="col-md-2">.col-md-2</div>
									<div class="col-md-2">.col-md-2</div>
								</div>
								<div class="show-grid">
									<div class="col-md-3">.col-md-3</div>
									<div class="col-md-3">.col-md-3</div>
									<div class="col-md-3">.col-md-3</div>
									<div class="col-md-3">.col-md-3</div>
								</div>
								<div class="show-grid">
									<div class="col-md-4">.col-md-4</div>
									<div class="col-md-4">.col-md-4</div>
									<div class="col-md-4">.col-md-4</div>
								</div>
								<div class="show-grid">
									<div class="col-md-5">.col-md-5</div>
									<div class="col-md-5">.col-md-5</div>
									<div class="col-md-2">.col-md-2</div>
								</div>
								<div class="show-grid">
									<div class="col-md-6">.col-md-6</div>
									<div class="col-md-6">.col-md-6</div>
								</div>
								<div class="show-grid">
									<div class="col-md-1">.col-md-1</div>
									<div class="col-md-11">.col-md-11</div>
								</div>
								<div class="show-grid">
									<div class="col-md-2">.col-md-2</div>
									<div class="col-md-10">.col-md-10</div>
								</div>
								<div class="show-grid">
									<div class="col-md-3">.col-md-3</div>
									<div class="col-md-9">.col-md-9</div>
								</div>
								<div class="show-grid">
									<div class="col-md-4">.col-md-4</div>
									<div class="col-md-8">.col-md-8</div>
								</div>
								<div class="show-grid">
									<div class="col-md-5">.col-md-5</div>
									<div class="col-md-7">.col-md-7</div>
								</div>
							</div>
							<div class="divider"></div>
							
						</div>
						<div id="tab4" class="tab-box">
							<div id="docs-slider" >
								<h1>Slider Types &amp; their Options</h1>
								<p><strong>Mowasalat</strong> includes 2 Unique Sliders &amp; Pre-Built Slider Templates for you to be used on any Page with 10s of Options. The List of all the Sliders included are mentioned as follows:</p>
								<ul>
									<li>Revolution Slider</li>									
									<li>Owl Slider</li>
								</ul>
								<br><br>
								<h2>Revolution Slider</h2>
								<p>You can find the Revolution Slider related Documentation here.<br><br><a target="_blank" href="Revolution%20Slider%20Documentation/documentation.html" class="btn btn-danger">Read Revolution Slider Docs</a></p>
								<br><br>
							</div>
						</div>
						<div id="tab5" class="tab-box">
							<div id="docs-b-setup">
								<h1>Blog Setup</h1>
								<p><strong>Mowasalat</strong> has 2 different type of Blog Posts.  Use the Code Sample below:</p>
								<h3 class="heading4">Blog post</h3>
<pre>&lt;div class="row post"&gt;
	&lt;div class="col-lg-8 col-md-8 picture"&gt;&lt;img src="images/blog/1.jpg" class="img-responsive" alt=""&gt;&lt;/div&gt;
	&lt;div class="col-lg-4 col-md-4"&gt;
		&lt;ul class="info clearfix"&gt;
			&lt;li class="category"&gt;&lt;i class="fa fa-picture-o" aria-hidden="true"&gt;&lt;/i&gt;&lt;/li&gt;
			&lt;li class="date"&gt;18 Jan, 2016&lt;/li&gt;
		&lt;/ul&gt;
		&lt;h1&gt;&lt;a href=""&gt;We take pride in serving our customers safely.&lt;/a&gt;&lt;/h1&gt;
		&lt;div class="description"&gt;Lorem ipsum dolor sit , consectet adipisi elit, sed do eiusmod tempor 
			for enim adesg ens minim veniam ipsum consectet adipisi elit, sed do minim veniam..&lt;/div&gt;
		&lt;div class="button"&gt;&lt;a href="" class="fill-blue"&gt;Read More&lt;/a&gt;&lt;/div&gt;
	&lt;/div&gt;
&lt;/div&gt;</pre>
<h3 class="heading4">Blog post - Grid Style</h3>
<pre>&lt;div class="col-lg-4 col-md-4 col-sm-6"&gt;
	&lt;div class="post"&gt;
		&lt;div class="picture"&gt;
			&lt;a href=""&gt;&lt;img src="images/latest-news/1.jpg" class="img-responsive center-block" alt=""&gt;&lt;/a&gt;
			&lt;div class="info"&gt;
				&lt;div class="category"&gt;&lt;i class="fa fa-picture-o" aria-hidden="true"&gt;&lt;/i&gt;&lt;/div&gt;
				&lt;div class="date"&gt;18 Jan, 2016&lt;/div&gt;
			&lt;/div&gt;
		&lt;/div&gt;
		&lt;h1&gt;&lt;a href=""&gt;Possibility in every direction&lt;/a&gt;&lt;/h1&gt;
		&lt;div class="description"&gt;Lorem ipsum dolor sit , consectet adipisi elit, sed do eiusmod tempor for enim adesg ens minim veniam ipsum   consectet adipisi elit, sed do minim veniam..&lt;/div&gt;
	&lt;/div&gt;
&lt;/div&gt;</pre>


							</div>
							<div class="divider"></div>
							<div id="docs-b-posttypes" >
								<h1>Post Types</h1>
								<p>You can use a 14 different types of Post Types:</p>
								<ul class="text-capitalize">
									<li>Image</li>
									<li>image full width</li>
									<li>3 column</li>
									<li>blockquote</li>
									<li>lEFT SIDEBAR</li>
									<li>right SIDEBAR</li>
									<li>both sidebar</li>
									<li>slider</li>
									<li>audio</li>
									<li>sound cloud</li>
									<li>vimeo</li>
									<li>youtube</li>
									<li>html5 video</li>
								</ul>
							</div>
						</div>
						<div id="tab6" class="tab-box">
							<div id="docs-port-setup" class="content-inner">
								<h1>Vehicle Gallery Setup</h1><br>
								<p><strong>Mowasalat</strong> provides a very elegant way to showcase your vehicles.</p><br>
								<h3 class="heading3">Setting up Gallery Items:</h3>
								<br>
<pre>&lt;div class="col-lg-4 col-md-4 col-sm-6 block"&gt;
	&lt;div class="picture"&gt;
		&lt;img src="images/vehicle-park/1.jpg" class="img-responsive center-block" alt=""&gt;
		&lt;!-- Picture Overlay Starts --&gt;
		&lt;div class="portfolio-overlay"&gt;
			&lt;div class="icons"&gt;
				&lt;div&gt;&lt;span class="icon"&gt;&lt;a class="image-popup-vertical-fit" href="images/vehicle-park/1.jpg" title="Pellentesque habitant morbi"&gt;&lt;i class="fa fa-search"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/span&gt;&lt;/div&gt;
			&lt;/div&gt;
		&lt;/div&gt;
		&lt;!-- Picture Overlay Ends --&gt;
	&lt;/div&gt;
	&lt;div class="caption"&gt;Vehicle Name&lt;/div&gt;
&lt;/div&gt;
</pre>
						
							
							<div class="divider"></div>
						</div>
						</div>
						<div id="tab7" class="tab-box">
							<div class="divider"></div>
							<div id="docs-sc-sections" >
								<h1>Setting Up Parallax Sections:</h1>														
								<p>Make sure your Parallax Images are of enough <code>Width</code> &amp; <code>Height</code>, preferably <code>1920x1080</code> or above.</p>
<pre >&lt;div class="parallax-1"&gt;
	&lt;div class="container"&gt;
		&lt;div class="row"&gt;
			&lt;div class="col-lg-12"&gt;
				
			&lt;/div&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/div&gt;</pre>
								
								
							</div>
							<div class="divider"></div>
							<div id="docs-sc-tabs" >
								<h1>Tabs, Toggles &amp; Accordions</h1>
								<p>You can use Tabs, Toggles &amp; Accordions in Various Styles and with Different Options to display Below the Fold content.</p>
								<div class="line line-sm"></div>
								<h3>Tabs</h3>
								<p>Use this code to display Tabs:</p>
<pre>&lt;div class="tabs-section"&gt;
	&lt;ul class="tabset"&gt;
		&lt;li&gt;&lt;a href="#tab-1"&gt;Tab 1&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href="#tab-2"&gt;Tab 2&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href="#tab-3"&gt;Tab 3&lt;/a&gt;&lt;/li&gt;
	&lt;/ul&gt;
	&lt;div class="tab-content"&gt;
		&lt;div id="tab-1"&gt;
			This is Tab 1 Content
		&lt;/div&gt;
		&lt;div id="tab-2"&gt;
			This is Tab 2 Content
		&lt;/div&gt;
		&lt;div id="tab-3"&gt;
			This is Tab 3 Content
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/div&gt;</pre>

								<p ><span class="label label-danger">Note:</span> Make sure you add <strong>unique</strong> IDs for each Tab Container and Tab Items.</p>
								<div class="divider"></div>
								<h3>Accordions</h3>
								<p>You can add an Accordion using the Code below:</p>
<pre>&lt;ul class="beans-accordion"&gt;

	&lt;a class="opener" href="#"&gt;&lt;i class="fa"&gt;&lt;/i&gt;  Accordion Title/opener  &lt;/a&gt;
	&lt;div class="beans-slide"&gt;Accordion Content Goes Here&lt;/div&gt;

	&lt;a class="opener" href="#"&gt;&lt;i class="fa"&gt;&lt;/i&gt;  Accordion Title/opener  &lt;/a&gt;
	&lt;div class="beans-slide"&gt;Accordion Content Goes Here&lt;/div&gt;

	&lt;a class="opener" href="#"&gt;&lt;i class="fa"&gt;&lt;/i&gt;  Accordion Title/opener  &lt;/a&gt;
	&lt;div class="beans-slide"&gt;Accordion Content Goes Here&lt;/div&gt;

&lt;/ul&gt;</pre>
							</div>
							<div class="divider"></div>
							<div id="docs-sc-lightbox" >
								<h1>Lightbox</h1>
								<h3>Setting up Lightboxes:</h3>
								<p>Adding a <code>.lightbox</code> class to any Link or Button will turn it into a Lightbox Element. You can use different Types of Lightbox with an Easy Setup:</p>
								<h5>Single Image:</h5>
<pre >&lt;a class="image-popup-vertical-fit" href="images/vehicle-park/1.jpg" title="Pellentesque habitant morbi"&gt;&lt;/a&gt;</pre>								
								<h5>Video:</h5>
<pre>&lt;a class="popup-youtube" href="http://www.youtube.com/watch?v=0O2aH4XLbto"&gt;Lightbox Video&lt;/a&gt;</pre>
								<p ><span class="label label-danger">Note:</span> It is recommended that you use only this Format <code>http://www.youtube.com/watch?v=kuceVNBTJio</code> for Youtube Videos.</p>
								
							</div>
							<div class="divider"></div>
							<div id="docs-sc-gmap" >
								<h1>Google Maps</h1>
								<p>You can add Embedded Google Maps iframe to any Page using the following setup:</p>
																		
										<p>Add a <code>section</code> which will contain your Google Map:</p>
<pre>&lt;iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d25215.625657884106!2d144.956637!3d-37.81456500000001!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad65d4e793770d3%3A0x9e44d6ad0d76ba7c!2s121+King+St%2C+Melbourne+VIC+3000%2C+Australia!5e0!3m2!1sen!2sus!4v1435061406583" height="400" allowfullscreen&gt;&lt;/iframe&gt;</pre>
									
							</div>
							<div class="divider"></div>
							<div id="docs-sc-countdown" >
								<h1>Countdown</h1>
								<p>You can add a Countdown Timer to any Page using the following setup:</p>
<pre>&lt;div class="count"&gt;&lt;/div&gt;
&lt;script&gt;
	$(window).load(function() {
		$('.count').counterUp({
			delay: 10,
			time: 1000
		});
	});
&lt;/script&gt;</pre>
								
							</div>
						</div>
						<div id="tab8" class="tab-box">
							<div id="docs-wid-setup" >
								<h1>Contact AJAX Form Setup</h1>
								<p>Update email address. Please open “process.php” update your email address in line#2.<br>$adminemail = "youremailhere@googlemail.com"; 
</p>

								
							</div>
							<div class="divider"></div>
							
						</div>
						<div id="tab9" class="tab-box">
							<div id="docs-c-images" >
								<h1>Images</h1>
								<ul>
									<li><a href="http://thestocks.im/" target="_blank" title="The Stocks">The Stocks</a></li>
									<li><a href="http://unsplash.com/" target="_blank" title="Unsplash">Unsplash</a></li>
									<li><a href="http://www.imcreator.com/free" target="_blank" title="Imcreator FREE">Imcreator FREE</a></li>
								</ul>								
								<p>
									<span class="label label-danger">Note:</span> If you need the Default Mockups PSD Files used in the Mowasalat Template, you can <a href="http://themeforest.net/item/Mowasalat-elegant-multipurpose-psd-theme/10914633?s_phrase=Mowasalat&s_rank=1" class="btn btn-info btn-sm" target="_blank">Buy them here</a>
								</p>
							</div>
							<div class="divider"></div>
							<div id="docs-c-jquery" >
								<h1>jQuery</h1>
								<ul>
									<li><a href="http://codecanyon.net/item/slider-revolution-responsive-jquery-plugin/2580848" target="_blank">Revolution Slider</a></li>
									<li><a href="http://www.owlcarousel.owlgraphic.com/" target="_blank">Owl Carousel</a></li>
									<li><a href="http://labs.mario.ec/jquery-gmap/" target="_blank">Google Map</a></li>
									<li><a href="http://fitvidsjs.com/" target="_blank">FitVids</a></li>
									<li><a href="https://github.com/mhuggins/jquery-countTo" target="_blank">CountTo</a></li>
								</ul>
							</div>
							<div id="docs-c-css" >
								<h1>CSS &amp; Fonts</h1>
								<ul>
									<li><a href="http://getbootstrap.com/" target="_blank">Bootstrap</a></li>
									<li><a href="http://fortawesome.github.io/Font-Awesome/" target="_blank">Font-Awesome</a> (Font Icons)</li>
									<li><a href="https://icomoon.io/" target="_blank">Icomoon</a> (Font Icons)</li>
									<li><a href="https://www.google.com/fonts" target="_blank">Google Fonts</a></li>
								</ul>
							</div>							
						</div>
						<div id="tab10" class="tab-box">
							
							<div id="docs-changelog-v0" >
								<h1>Initial Release V1.0</h1>
								<p>Released on <strong>8th June 2016</strong></p>
							</div>
						</div>
					</div>
				</div>
			</div>
			</div>
		</main>
		<footer id="footer">
			<div class="copyrights">
				<div class="container-fullwidth">
					<div class="col-md-12 nopadding center">
						Copyrights &copy; 2016 All Rights Reserved, Proudly designed by <a href="http://themeforest.net/user/creative-wp">Creative-Wp</a> and Developed by <a href="http://themeforest.net/user/alia">alia</a><br>
						<div class="copyright-links"><a href="mailto:m.arafa84@hotmail.com">Support</a> /  <a href="mailto:m.arafa84@hotmail.com">Contact</a></div>
					</div>
				</div>
			</div>
		</footer>
	</div>
	<div id="gotoTop" class="icon-angle-up"></div>
</body>
</html>